<template>
  <el-select
    ref="select"
    v-bind="$attrs"
    v-model="selectValue"
    class="role-employee-select"
    popper-class="user_select"
    :placeholder="placeholder"
    clearable
    @change="selectChange"
    @visible-change="visibleChange"
  >
    <div class="absolute_ipt">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="输入搜索内容"
        :validate-event="false"
        v-model="filterText"
      >
      </el-input>
    </div>
    <div class="role-employee-select__body select_body">
      <el-option
        v-for="(item, index) in personOption"
        :key="index + '-item'"
        :label="item.realname"
        :value="item.userId"
      />
      <p v-if="personOption && personOption.length == 0">暂无数据</p>
      <!-- 解决搜索项为空时，下拉不显示的bug -->
      <el-option
        v-for="item in groupList"
        :label="item.name"
        :key="item.deptId"
        :value="item.deptId"
        style="opacity: 0; height: 0"
      />
    </div>
  </el-select>
</template>

<script>
import { mapGetters } from "vuex";
import { queryBaseUserList } from "@/api/common";
export default {
  // 人员选择器-单选
  name: "UserSelect",
  props: {
    props: {
      type: Object,
      default: () => {
        return {};
      }
    },
    value: [Array, Number, String],
    restrictData: String, // 数据限制字段
    placeholder:{
      type:String,
      default:'输入搜索内容'
    },
    teacherList:[Array]
  },

  data() {
    return {
      filterText: "",
      selectValue: "",
      changeValue: "", //解决闪数字问题
      personOption: [],
      temppersonOptions: [],
      deptId: null,
      roleIdList: null,
      groupList: [
        {
          deptId: -1,
          name: "站位数据"
        }
      ]
    };
  },

  computed: {
    ...mapGetters(["userAllList"])
  },

  watch: {
    value: {
      handler(val) {
        if (val) {
          this.changeValue = val;
          if (this.personOption && this.personOption.length > 0) {
            this.selectValue = val;
          }
        } else {
          this.selectValue = "";
          this.changeValue = "";
        }
      },
      immediate: true
    },
    // 人员列表搜索过滤
    filterText(val) {
      let list = [];
      if (val != "" || val != null) {
        this.temppersonOptions.forEach(item => {
          if (item.realname.includes(val)) {
            list.push(item);
          }
        });
        this.personOption = list;
      } else {
        this.personOption = this.temppersonOptions;
      }
    }
  },
  created() {
    // this.getPersonList();
    this.personOption = this.userAllList;
    this.temppersonOptions = this.personOption;
    this.selectValue = this.changeValue;
  },
  methods: {
    /**
     * 获取人员列表
     */
    getPersonList() {
      queryBaseUserList({
        pageType: 0,
        deptId: this.deptId,
        roleIdList: this.roleIdList
      }).then(res => {
        this.personOption = res.data.list;
        this.temppersonOptions = this.personOption;
        this.selectValue = this.changeValue;
      });
    },
    // 文本框点击
    visibleChange(e) {
      if (e) {
        if (this.restrictData) {
          const str = JSON.parse(this.restrictData);
          const target = Object.prototype.toString.call(str);
          target === "[object Object]"
            ? (this.deptId = str.deptId)
            : (this.roleIdList = str);
          this.getPersonList();
        } else if(this.teacherList){
          this.personOption = this.teacherList
          this.temppersonOptions = this.personOption;
          this.selectValue = this.changeValue;
        } else {
          this.deptId = null;
          this.roleIdList = null;
          this.personOption = this.userAllList;
          this.temppersonOptions = this.personOption;
          this.selectValue = this.changeValue;
        }
      }else {
        this.filterText = ''
      }
    },
    // 数据过滤方法
    filter(data) {
      const list = [];
      data.forEach(item => {
        list.push(...item.list);
      });
      return list;
    },
    selectChange() {
      this.$emit("input", this.selectValue);
    }
  }
};
</script>
<style lang="scss">
.el-tabs__header--hidden {
  .el-tabs__header {
    display: none;
  }
}
</style>

<style lang="scss" scoped>
/deep/ .el-select-dropdown__item.selected {
  position: relative;
  background-color: #edf1fc;
}
/deep/ .el-select-dropdown__item.selected::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: #2362fb;
  content: "";
}

.role-employee-select {
  &__body {
    width: 100%;
    p {
      text-align: center;
      color: #999;
      height: 60px;
      line-height: 60px;
    }
    /deep/ li {
      font-size: 13px;
      height: 40px;
      line-height: 40px;
    }
  }

  &__title {
    border-bottom: 1px solid #e4e7ed;
    padding: 0 0 7px;
    font-size: 12px;
    color: #909399;
    line-height: 30px;
  }

  .el-select-dropdown__item {
    padding: 0 10px;
  }
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  content: "" !important ;
  background: transparent;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::before {
  border: 1px solid #2362fb;
  color: #fff;
  background: #2362fb;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item::before {
  position: absolute;
  left: 0;
  top: 12px;
  font-family: "element-icons";
  content: "\E6DA";
  font-size: 12px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  border: 1px solid #c1c7ce;
  width: 14px;
  display: block;
  height: 14px;
  margin: 0;
  line-height: 14px;
  color: transparent;
}

/deep/ .el-tabs {
  .el-tabs__nav-wrap::after {
    height: 1px;
  }

  .el-tab-pane {
    height: 100%;
    overflow-y: auto;
  }

  .el-tabs__content {
    height: 200px;
  }
}

.search-input {
  margin-bottom: 5px;
  /deep/ .el-input__inner {
    background-color: #f4f4f4;
    border: none;
  }
}

.cell {
  width: calc(100% - 30px);
  &__img {
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
  }
  &__body {
    flex-shrink: 0;
    flex: 1;
    margin-right: 30px;
  }
  &__footer {
    text-align: right;
  }
}
</style>
<style lang="scss">
// 修改人员选择器下拉高度
.user_select {
  border: none !important;
  .el-select-dropdown__wrap {
    max-height: 378px !important;
    .el-input__inner {
      border: none !important;
      background: #f6f7fc !important;
    }
  }
}
</style>
<style lang="scss" scoped>
@import "../styles/selector.scss";
</style>
